<template>
	<card-block title="资源热度">
		<template slot="button">
			<router-link to="/">全部资源</router-link>
		</template>
		<template slot="content">
			<ul class="hot_resource">
				<li data-index="1">
					<router-link to="/1">CPSF30-L和m6A甲基转移酶MTACPSF30-L和m6A甲基转移酶MTACPSF30-L和m6A甲基转移酶MTA</router-link>
					<p>2048+</p>
				</li>
				<li data-index="2">
					<router-link to="/2">CPSF30-L和m6A甲基转移酶MTA</router-link>
					<p>2048+</p>
				</li>
				<li data-index="3">
					<router-link to="/3">CPSF30-L和m6A甲基转移酶MTA</router-link>
					<p>2048+</p>
				</li>
				<li data-index="4">
					<router-link to="/4">CPSF30-L和m6A甲基转移酶MTA</router-link>
					<p>2048+</p>
				</li>
				<li data-index="5">
					<router-link to="/5">CPSF30-L和m6A甲基转移酶MTA</router-link>
					<p>2048+</p>
				</li>
			</ul>
		</template>
	</card-block>
</template>

<script>
import cardBlock from './cardBlock';
export default {
	components: { cardBlock }
};
</script>

<style lang="scss" scoped>
.hot_resource {
	padding: 0 16px;
	li {
		display: flex;
		align-items: center;
		height: 56px;
		border-top: solid 1px #eef1f5;
		&:first-child {
			border-top: none;
		}
		&::before {
			width: 24px;
			height: 24px;
			line-height: 24px;
			text-align: center;
			margin-right: 10px;
			flex-shrink: 0;
			content: attr(data-index);
			font-weight: bold;
			border-radius: 50%;
			color: var(--primary);
			background-color: var(--primary-background-plain);
		}
		a {
			flex: 1;
			color: #303133;
			text-decoration: none;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			&:hover {
				color: var(--primary-hover);
				text-decoration: underline;
			}
		}
		p {
			color: #303133;
			flex-shrink: 0;
			font-weight: bold;
			margin-left: 10px;
			&::after {
				content: '点击';
				font-weight: normal;
				margin-left: 6px;
			}
		}
	}
}
</style>
